import Music from './Music.js'

class Render {
  constructor (ctx) {
    this.ctx = ctx
    this.blocks = [
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0]
    ]
    this.pushblocks = [0,0,0,0]
    this.init = {
      cw: this.ctx.canvas.width,
      ch: this.ctx.canvas.height,
      w: this.ctx.canvas.width / 4,
      h: this.ctx.canvas.height/ 4
    }
    this.top = 0
    this.isOver = false
    this.isBegin = false
    this.score = 0
    this.speed = this.init.h / 40
    this.music = new Music()
  }
  drawBg () {
    if (this.score!= 0 && this.score % 10 == 0){
      this.speed += this.init.h / 3600
    }
    if (this.top >= this.init.h){
      if(this.blocks[0].indexOf(1) != -1){
        this.isOver = true
        this.music.errPlay()
      }else {
        this.blocks.shift()
        this.pushBlackblock()
        this.blocks.push(this.pushblocks)
        this.pushblocks = [0, 0, 0, 0]
        this.top = 0
      }
    }else{
      this.top += this.speed
      this.top = Number(parseFloat(this.top).toFixed(8))
    }
    this.blocks.forEach((row, index) => {
      for(let rowIndex = 0; rowIndex < 4; rowIndex++){
        if(row[rowIndex] === 0){
          this.ctx.fillStyle = '#fff'
        } else if (row[rowIndex] === 1){
          this.ctx.fillStyle = '#000'
          this.ctx.strokeStyle = '#fff'
          this.ctx.strokeRect(this.init.w * rowIndex, this.top + this.init.ch - (index + 1) * this.init.h, this.init.w, this.init.h)
        } else if (row[rowIndex] === 2) {
          this.ctx.fillStyle = '#f00'
        } else if (row[rowIndex] === 3) {
          this.ctx.fillStyle = '#ccc'
        }
        this.ctx.fillRect(this.init.w * rowIndex,this.top +  this.init.ch - (index + 1) * this.init.h,this.init.w,this.init.h)
      }
    })
  }
  initBlocks () {
    //初始化小方块
    this.blocks.forEach((row, index) => {
      if (row.indexOf(1) === -1) {
        let randomIndex = Math.floor(Math.random() * 4)
        row[randomIndex] = 1
      }
    })
  }
  pushBlackblock () {
    //随即插入小黑快
    if(this.pushblocks.indexOf(1) === -1){
      let randomIndex = Math.floor(Math.random() * 4)
      this.pushblocks[randomIndex] = 1
    }
  }
  playclick () {
    return new Promise((resolve,reject) => {
      this.ctx.canvas.addEventListener('touchstart', e => {
        let dot = e.changedTouches[0]
        let t_r_index = Math.floor(dot.clientX / this.init.w)
        let t_c_index = Math.floor((this.init.ch - dot.clientY + this.top) / this.init.h)
        if (!this.isBegin) {
          //游戏是否处于开始状态
          if (this.blocks[t_c_index][t_r_index] == 1) {
            this.blocks[t_c_index][t_r_index] = 3
            this.isBegin = true
            this.score = 1
          }
        } else {
          if (this.blocks[t_c_index][t_r_index] == 1) {
            //确定用户点击到了黑块
            if (t_c_index == 0) {
              this.blocks[t_c_index][t_r_index] = 3
              this.score += 1
              this.music.bgPlay()
            }
            else {
              for (let i = 0; i < t_c_index; i++) {
                if (this.blocks[i].indexOf(1) != -1) {
                  this.blocks[t_c_index][t_r_index] = 2
                  this.isOver = true
                } else {
                  this.blocks[t_c_index][t_r_index] = 3
                  this.music.bgPlay()
                }
              }
              if(!this.isOver){
                this.score ++
              }
            }
          }
          else if (this.blocks[t_c_index][t_r_index] === 0) {
            this.blocks[t_c_index][t_r_index] = 2
            this.isOver = true
          }
        }
        resolve()
      })
    })
  }
  listenBegin () {
    return new Promise((resolve, reject) => {
      this.ctx.canvas.addEventListener('touchstart', e => {
        let dot = e.changedTouches[0]
        let t_r_index = Math.floor(dot.clientX / this.init.w)
        let t_c_index = Math.floor((this.init.ch - dot.clientY + this.top) / this.init.h)
        if (!this.isBegin) {
          //游戏是否处于开始状态
          if (t_c_index == 0 && this.blocks[t_c_index][t_r_index] == 1) {
            this.blocks[t_c_index][t_r_index] = 3
            this.isBegin = true
            this.score = 1
            this.music.bgPlay()
            resolve()
          }
        } 
      })
    })
  }
  showScore () {
    this.ctx.beginPath()
    this.ctx.font = '25px 微软雅黑'
    this.ctx.fillStyle = '#f00'
    // this.ctx.textAlign = 'center'
    this.ctx.fillText("分数: "+this.score, 5, 50)
    this.ctx.closePath()
  }
}
export default Render